<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="nav-box flexWrap">
					<view class="nav-item flexWarpCenterColumn" :class="{active:currmentIndex==2}" @tap="changeNav(2)">
						<text>美团验券</text>
						<text class="nav-line"></text>
					</view>
					<view class="nav-item flexWarpCenterColumn" :class="{active:currmentIndex==1}" @tap="changeNav(1)">
						<text>抖音验券</text>
						<text class="nav-line"></text>
					</view>
				</view>
				<view class="tips" v-if="is_authorize==0" @tap="openCustomerServiceChat()">本店铺还未设置{{currmentIndex==2?'美团':'抖音'}}授权，请先联系<text>管理员</text>设置。</view>
				<view class="function-box">
					<view class="function-item flexWrap">
						<view class="th1">团购ID</view>
						<view class="th2">名称</view>
						<view class="th3">操作</view>
					</view>
					<view class="function-item flexWrap" v-for="(item,index) in dataList" :key="index">
						<view class="th1">{{currmentIndex==2?item.meituan_id:item.goods_id}}</view>
						<view class="th2">
							{{item.title}}
						</view>
						<view  class="th3">
							<text @tap="goPage('/moduleB/manage/editWriteoff?type='+currmentIndex+'&id='+item.id)">编辑</text>
							<text style="margin-left: 10upx;" @tap="delte(index)">删除</text>
						</view>
					</view>
					<view class="add-btn"  @tap="goPage('/moduleB/manage/editWriteoff?type='+currmentIndex)">
						新建验券
					</view>
				</view>
				<view class="remaks-box">
					备注：如需新增或者删除{{currmentIndex==2?'美团':'抖音'}}团单，请在{{currmentIndex==2?'美团':'抖音'}}开店宝内设置。此处仅是团单验券设置，每个团单必须设置验券才能在小程序内自助验券核销。
				</view>
				
				<!--操作指引悬浮按钮 -->
				<guideline :path="'moduleB/manage/meituanTiktok'"></guideline>
				<!-- <view class="bottom-box flexWrapNo">
					<view class="define-btn">提交保存</view>
				</view> -->
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				currmentIndex:2,
				dataList:[],
				is_authorize:0,
				customerUrl:"",
				corpId:""
			}
		},
		onLoad() {
			this.groupBuyingList();
			this.getCustomerInfo();
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		methods: {
			getCustomerInfo(){
				this.$request.post(this.$api.getCustomerInfo, {
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.customerUrl=data.customer_url
						this.corpId=data.enterprise_id
					}
				})
			},
			delte(index){
				uni.showModal({
					title:'提示',
					content:"是否删除该券?",
					success: (res) => {
						if(res.confirm){
							this.delGroupBuying(this.dataList[index].id);
							this.dataList.splice(index, 1)
						}
					}
				})
			},
			delGroupBuying(id){
				this.$request.post(this.$api.delGroupBuying, {
					id:id,
					type:this.currmentIndex,
					store_id: uni.getStorageSync('store_id'),
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.$tools.showToast('删除成功')
					}
				})
			},
			openCustomerServiceChat(){
				let that=this
				wx.openCustomerServiceChat({
				  extInfo: {url:that.customerUrl},
				  corpId: that.corpId,
				  success(res) {
					  console.log(res)
				  },
				  complete(com){
					  console.log(com)
				  }
				})
			},
			changeNav(index){
				this.currmentIndex=index
				this.groupBuyingList();
			},
			groupBuyingList(){
				this.$request.post(this.$api.groupBuyingList, {
					store_id: uni.getStorageSync('store_id'),
					type:this.currmentIndex
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.dataList=data.data_list
						this.is_authorize=data.is_authorize
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 30upx;
	}
	page{
		padding-bottom: 200upx;
	}
	.nav-box{
		padding: 20upx 74upx;
		border-bottom: 1rpx solid #36355E;
		.nav-item{
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #82819B;
			.nav-line{
				width: 86rpx;
				height: 6rpx;
				margin-top: 10upx;
			}
		}
		.active{
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			.nav-line{
				background: #26BCFD;
			}
		}
	}
	.tips{
		font-size: 28upx;
		background: #1D1C5C;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		color: #FFFFFF;
		margin-top: 10upx;
		text{
			color: #26BCFD;
			text-decoration: underline;
		}
	}
	.function-box{
		background: #1D1C5C;
		border-radius: 10upx;
		padding: 30upx;
		margin-top: 20upx;
		.function-item{
			font-size: 24upx;
			color: #FFFFFF;
			height: 100upx;
			line-height: 100upx;
			border-bottom: 1rpx solid #36355E;
			border-left: 1rpx solid #36355E;
			border-right: 1rpx solid #36355E;
			&:nth-of-type(1){
				border-top: 1rpx solid #36355E;
				font-weight: bold;
				font-size: 30upx;
				.th3{
					color: #FFFFFF;
				}
			}
			.th1{
				width: 140upx;
				height: 100upx;
				padding: 0 10upx;
				text-align: center;
				border-right: 1rpx solid #36355E;
				overflow-x:scroll;
			}
			.th2{
				height: 100upx;
				padding: 0 10upx;
				border-right: 1rpx solid #36355E;
				text-align: center;
				flex: 1;
				overflow-y: scroll;
			}
			.th3{
				height: 100upx;
				width: 120upx;
				padding: 0 10upx;
				text-align: center;
				color: #26BCFD;
			}
		}
		.add-btn{
			font-size: 24upx;
			text-align: center;
			color: #26BCFD;
			height: 100upx;
			line-height: 100upx;
			border-bottom: 1rpx solid #36355E;
			border-left: 1rpx solid #36355E;
			border-right: 1rpx solid #36355E;
		}
	}
	.remaks-box{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #82819B;
		line-height: 40rpx;
		margin-top: 12upx;
	}
	.bottom-box{
		height: 120rpx;
		background: #1D1C5C;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		.define-btn{
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 80rpx;
			width: 322rpx;
			height: 80rpx;
			background: #26BCFD;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			text-align: center;
		}
	}
</style>
